<template>
  <div class="container-fluid wyh mb-5">
    <div class="row mb-5" style="margin-top: 60px">
      <div class="spec-preview">
        <img :src="list.img" />
        <div class="event" @mousemove="handler"></div>
        <div class="big">
          <img :src="list.img" ref="big" />
        </div>
        <!-- 遮罩层 -->
        <div class="mask" ref="mask"></div>
      </div>
      <div class="col col-lg-2"></div>
      <div class="col col-lg-5 mt-3 mb-5 mx-5" style="text-align: left">
        <div class="row">
          <div class="col col-lg-12 mt-3">
            <h2 style="color: #ff7bac">【{{ list.text1 }}】</h2>
          </div>
        </div>
        <div class="row">
          <div class="col col-lg-12 mt-4 jieshi">
            <small>{{ list.text2 }}</small>
          </div>
        </div>
        <div class="row">
          <div class="col col-lg-12 mt-2">
            <span style="font-size: 14px; color: gray">促销单价：</span
            >&nbsp;&nbsp; <span style="font-size: 50px">{{ list.money }}</span
            >&nbsp;&nbsp;
            <span style="font-size: 14px; color: gray">元</span>
          </div>
        </div>

        <div class="row mb-4 mt-2">
          <div class="col col-lg-7" id="span">
            <span style="font-size: 14px; color: gray">
              数&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：</span
            >
            <span class="sub" @click="decreCount()">-</span>
            <span class="input_1">
              <input style="width: 40px; text-align: center"  type="text" v-model.number="list.count"
              />
            </span>
            <span class="add" @click="increCount()">+</span> 盒
          </div>
          <div class="col col-lg-4">
            <small style="font-size: 12px"
              >合计:
              <span style="font-size: 22px">{{ Number(list.money) * Number(list.count) }}元</span>
            </small>
          </div>
        </div>
        <div class="row mt-4" style="align-items: center; color: white">
          <div
            class="col col-lg-4"
            :class="['goumai', list.count === 0 ? 'goumai' : 'goumai_red']"
          >
            <span class="liji" @click="gotoCart(list)">加入购物车</span>
          </div>
          <div class="col col-lg-4">
            <div
              class="col col-lg-4"
              :class="['goumai', list.count === 0 ? 'goumai' : 'goumai_red']">
              <span class="liji" @click="getGoods()">立即购买</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div
      class="row mt-5 mb-2 bigimg" style="border: 1px solid red;border: 1px solid gainsboro;float: left;width: 100%;margin: 0 auto;">
      <div class="col col-lg-3">
        <img class="mb-4 mt-4" style="width: 340px; height: 220px" :src="list.img" alt=""/>
      </div>
      <div class="col col-lg-3">
        <img class="mb-4 mt-4" style="width: 340px; height: 220px" :src="list.img3" alt=""/>
      </div>
      <div class="col col-lg-3">
        <img class="mb-4 mt-4" style="width: 340px; height: 220px" :src="list.img4" alt="" />
      </div>
      <div class="col col-lg-3">
        <img class="mb-4 mt-4" style="width: 340px; height: 220px" :src="list.img5" alt="" />
      </div>
    </div> -->

    <div class="row">
      <img style="width: 100%" src="http://r.photo.store.qq.com/psc?/V10oAX800ltCLc/ruAMsa53pVQWN7FLK88i5omU17bpcWtP7CH.FBcDp3m8HwwNmy7UbtcCUsYVPFkfmkR5cH9JGBq6LZVxB8*ZoEJKZwB7TEmK8tpwCzXrOj4!/r" alt="" />
    </div>
    <div class="row">
      <img style="width: 100%" src="http://r.photo.store.qq.com/psc?/V10oAX800ltCLc/ruAMsa53pVQWN7FLK88i5omU17bpcWtP7CH.FBcDp3m8HwwNmy7UbtcCUsYVPFkfmkR5cH9JGBq6LZVxB8*ZoEJKZwB7TEmK8tpwCzXrOj4!/r" alt="" />
    </div>
    <div class="row">
      <img style="width: 100%" src="http://r.photo.store.qq.com/psc?/V10oAX800ltCLc/ruAMsa53pVQWN7FLK88i5j6Bmmep8AhFlT31swWcba.Pz*sHXSPF0iUPQVzXQdQGwJZ.jt*D*5AEEVGrlIRkmbG5GWE01ppwI.373q3h5v8!/r" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      cakes: [],
    };
  },


  created(){
    //  console.log('详情页11111111111',this.list);
        this.list.id=this.$route.params.id;
        this.list.text1=this.$route.params.text1;
        this.list.text2=this.$route.params.text2;
        this.list.money=this.$route.params.money;
        this.list.count=Number(this.$route.params.count);
        this.list.totalPrice=this.$route.params.totalPrice;
        this.list.isChecked=this.$route.params.isChecked;
        this.list.static=this.$route.params.static
        this.list.img=this.$route.params.img; 
         console.log('我是状态',this.list);
    },
  methods: {
    decreCount() {
      if (this.list.count >= 1) {
        this.list.count--;
      }
    },
    increCount() {
      this.list.count++;
    },
    //这里是放大方法的主要处理逻辑
    handler(event) {
      let mask = this.$refs.mask;
      let big = this.$refs.big;
      let left = event.offsetX - mask.offsetWidth / 2;
      let top = event.offsetY - mask.offsetHeight / 2;
      //约束范围
      if (left <= 0) left = 0;
      if (left >= mask.offsetWidth) left = mask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= mask.offsetHeight) top = mask.offsetHeight;
      mask.style.left = left + 'px';
      mask.style.top = top + 'px';
      big.style.left = -2 * left + 'px';
      big.style.top = -2 * top + 'px';
      // console.log(left);
    },
    gotoCart(list) {
        this.$router.push({
        name: 'shopcart',
        params: {
          id:list.id,
          text1:list.text1,
          text2:list.text2,
          money:list.money,
          count:list.count,
          totalPrice:list.totalPrice,
          isChecked:list.isChecked,
          img:list.img,
          static:list.static
        },
        })
    },
    getGoods(){
        if(!this.$store.state.userInfo.name){
        alert('请先登录')
        this.$router.push('/login')
      }else{
        this.$router.push('/goumai')
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.wyh {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid pink;
  height:520px;
  margin: 0 auto;
  /* background: url('../assets/one.jpg'); */
}
.goumai {
  width: 140px;
  height: 40px;
  background-color: gray;
  margin-right: 30px;
}
.goumai_red {
  width: 140px;
  height: 40px;
  background-color: red;
}
.jieshi {
  color: rgb(110, 107, 107);
  width: 300px;
  display: inline-block;
}
.liji {
  display: block;
  font-size: 17px;
  text-align: center;
  line-height: 40px;
  color: white;
}
.spec-preview {
  position: relative;
  left: 220px;
  width: 500px;
  img {
    width: 100%;
    height: 400px;
  }

  .event {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
  }

  .mask {
    width: 50%;
    height: 50%;
    background-color: rgba(247, 217, 234, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
  }

  .big {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: 100%;
    border: 1px solid #aaa;
    overflow: hidden;
    z-index: 998;
    display: none;
    background: white;

    img {
      width: 200%;
      max-width: 200%;
      height: 200%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
.sub {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  width: 17px;
  border: 1px solid #e5e5e5;
}
.add {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  width: 17px;
  border: 1px solid #e5e5e5;
}
.bigimg img:hover {
  transform: scale(1.2);
}
</style>
